<template>
  <view class="bxo">
    <view class="bxo1">
      <view class="bxo1left">
        <image src="/static/image/位置.png" mode="" />
      </view>
      <view class="bxo1right">
        <view class="bxo1right1">
          山东省 济南市 历下区姚家街道花园小区
        </view>
        <view class="bxo1right2">
          陈喜喜 1522202232
        </view>
      </view>
    </view>
    <view class="bxo2">
      <view class="bxo22" v-for="item in list" :key="item.id">{{item.text}}</view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const list = ref(
    [{
        id: 1,
        text: " "
      },
      {
        id: 2,
        text: " "
      },
      {
        id: 3,
        text: " "
      },
      {
        id: 4,
        text: " "
      },
      {
        id: 5,
        text: " "
      },
      {
        id: 6,
        text: " "
      },
      {
        id: 7,
        text: " "
      },
      {
        id: 8,
        text: " "
      },
      {
        id: 9,
        text: " "
      },
      {
        id: 10,
        text: " "
      },
      {
        id: 11,
        text: " "
      },
      {
        id: 12,
        text: " "
      },
      {
        id: 13,
        text: " "
      },
      {
        id: 14,
        text: " "
      }
    ]
  )
</script>

<style lang="scss">
  .bxo {
    background-color: #fff;
    
    .bxo1 {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      bxo-sizing: border-bxo;
      .bxo1left {
        width: 10%;
        padding-top: 20rpx;
        bxo-sizing: border-bxo;

        image {
          width: 70rpx;
          height: 75rpx;
        }
      }

      .bxo1right {
        width: 88%;
        font-size: 30rpx;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        .bxo1right1 {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }

        .bxo1right2 {
          width: 100%;
          color: #636363;
          font-size: 28rpx;
        }
      }
    }

    .bxo2 {
      display: flex;
      color: #fff;

      .bxo22 {
        width: 45rpx;
        height: 10rpx;
        transform: skewX(-45deg);
        background-color: #fad0d3;
        margin-right: 15rpx;
      }

      .bxo22:nth-child(odd) {
        background-color: #fad0d3;
      }

      .bxo22:nth-child(even) {
        background-color: #d4ddfc;
      }
    }
  }
</style>